<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout">
	<head layout:fragment="contentHead">
		<title>苹果帐号管理</title>
	</head>
	<body>
		<div layout:fragment="contentCss">
	  		<link th:href="@{/css/jquery-ui.css}" rel="stylesheet"/>
	    	<link th:href="@{/css/jquery.toast.css}" rel="stylesheet"/>
	  	</div>
		<div layout:fragment="content">
			<div class="row">
				<div class="btn btn-primary mt-10" onclick="addAccount();">新增</div>
			</div>
			<div class="row">
				<table class="table table-bordered mt-15">
					<thead>
						<tr>
							<th>苹果账号</th>
							<th>已用设备</th>
							<th>添加时间</th>
							<th>p12文件</th>
							<th>操作</th>
							<th>同步设备</th>
						</tr>
					</thead>
					<tbody id="sortable">
					<tr th:if="${#lists.isEmpty(accounts)}" class="indexData">
						<td colspan="4" style="text-align: center;">查无数据</td>
					</tr>
					<tr th:unless="${#lists.isEmpty(accounts)}" class="indexData" th:each="item : ${accounts}">
						<td width="20%">[[${item.account}]]</td>
						<td width="20%">[[${item.count}]]/100</td>
						<td width="20%">[[${#temporals.format(item.createTime, 'yyyy-MM-dd HH:mm:ss')}]]</td>
						<td width="20%" th:text="${item.p12} ?'已上传':'未上传' "></td>
						<td width="20%">
							<a href="javascript:void(0);" class="btn btn-primary btn-xs btn-t edit-show" th:data-id="${item.account}" onclick="showEditModal(this)">上传P12</a>
						</td>
						<td width="20%">
							<a href="javascript:void(0);" class="btn btn-primary btn-xs btn-t edit-show" th:data-id="${item.id}" onclick="getDeviceList(this)">同步设备</a>
						</td>
						
					</tr>
					</tbody>
				</table>

				<div th:include="page :: page"></div>
			</div>
			<!-- Modal -->
			<div class="modal fade" id="myModalAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title">新增苹果帐号</h4>
                        </div>
                        <div class="modal-body">
                        	<form id="addAccForm">
								<div class="row ml-12 mt-5">
									<div class="col-md-3 custom-label" >
										<span style="color: red; ">*  </span>苹果账号:
									</div>
									<div class="col-md-9">
										<input type="email" name="account" class="form-control" >
									</div>
								</div>
                        		<div class="row ml-12 mt-5">
                        			<div class="col-md-3 custom-label" >
										<span style="color: red; ">*  </span>P8内容:
                        			</div>
									<div class="col-md-9">
										<textarea  name="p8" class="form-control" ></textarea>
									</div>
                        		</div>
                        		<div class="row ml-12 mt-5">
                        			<div class="col-md-3 custom-label"  >
										<span style="color: red; ">*  </span>IssuerId:
                        			</div>
									<div class="col-md-9">
										<input type="text" name="issuerId" class="form-control">
									</div>
                        		</div>
                        		<div class="row ml-12 mt-5">
                        			<div class="col-md-3 custom-label">
										<span style="color: red; ">*  </span>kid:
                        			</div>
									<div class="col-md-9">
										<input type="text" name="kid" class="form-control">
									</div>
                        		</div>
								<div class="row ml-12 mt-5">
									<div class="col-md-3 custom-label">
										<span style="color: red; ">*  </span>csr:
									</div>
									<div class="col-md-9">
										<textarea  name="csr" class="form-control" ></textarea>
									</div>
								</div>
                        	</form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary" onclick="createAcc()">提交</button>
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>
            <!-- /.modal -->

			<!-- Modal -->
			<div class="modal fade" id="myModalP12Add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
							<h4 class="modal-title">上传P12</h4>
						</div>
						<input id="p12Account" type="hidden" name="p12Account">
						<div class="modal-body">
							<form id="addIpaForm">
								<div class="row ml-12 mt-5">
									<div class="col-md-3 custom-label" >
										<span style="color: red; ">*  </span>P12:
									</div>
									<div class="col-md-9">
										<input id="file" type="file" name="file" class="form-control" >
									</div>
								</div>
							</form>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
							<button type="button" id="addIpaBtn" class="btn btn-primary" onclick="upload()">上传</button>
						</div>
					</div>
					<!-- /.modal-content -->
				</div>
				<!-- /.modal-dialog -->
			</div>
			<!-- /.modal -->

		</div>
	</body>
	<div layout:fragment="contentJs">
		<script th:src="@{/js/jquery-ui-1.11.0.min.js}" type="text/javascript"></script>
	    <script th:src="@{/js/jquery.toast.js}" type="text/javascript"></script>
    	<script th:src="@{/js/myToast.js}" type="text/javascript"></script>
		<script type="text/javascript">
			function addAccount(){
				$("#myModalAdd").modal("show");
			}
			
			function createAcc(){
				var datas = $("#addAccForm").serialize();
				$.ajax({
					type: "POST",
					url: "/appleAccount/addAccount",
					data: datas, // serializes 
					success: function(data)
					{
						if("200" == data.code){
							myToast(data.msg);
							location.reload();
						}else{
							myToastError(data.msg);
						}
					},
					error:function (data) {
						myToastError(data.msg);
					}
				});
			}

			function pagination(page){
				$("#pageNo").val(page);
				$("#search").submit();
			}

            function showEditModal(element){
                $("#myModalP12Add").modal("show");
                $("#p12Account").val($(element).attr("data-id"));
            }

            function getDeviceList(element){
                var id = $(element).attr("data-id");
                $.ajax({
                    type: "GET",
                    url: "/appleAccount/getDeviceList?id="+id, 
                    contentType: false,
                    cache: false,
                    success: function(data)
                    {
                        if("200" == data.code){
                            myToast(data.msg);
                            location.reload();
                        }else{
                            myToastError(data.msg);
                        }
                    }
                });
            }
            
            
            function upload(){
                var formData = new FormData();  //建構new FormData()
                var fileData = $("input[name=file]")[0].files[0];   //取得上傳檔案屬性

                var account = $("#p12Account").val();

                formData.append('p12', fileData);  //吧物件加到file後面
                formData.append('account', account);

                $.ajax({
                    type: "POST",
                    url: "/appleAccount/uploadP12",
                    data: formData,
                    processData: false,
                    contentType: false,
                    cache: false,
                    success: function(data)
                    {
                        if("200" == data.code){
                            myToast(data.msg);
                            location.reload();
                        }else{
                            myToastError(data.msg);
                        }
                    }
                });
			}

		</script>
	</div>
</html>